<template>
	<view>
		<!-- 顶部标题组件 -->
		<tabsTop :isSubmit="true" @submit="revise" tabName="个人信息"></tabsTop>
		<!-- 标题 -->
		<view class="font text-muted mx-2 py-2">基本信息</view>
		<!-- 基本信息 -->
		<view class="bg-white">
			<!-- 头像 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">头像</text>
				<view class="w-100 flex justify-between align-center">
					<button plain="true" class="p-0 m-0 rounded-circle" style=" width: 80rpx; height: 80rpx;" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="form.Image" style="width: 80rpx; height: 80rpx;"></image>
					</button>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 昵称 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light" @click="handleTitle('修改昵称')">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">昵称</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Nick ? form.Nick : '请填写昵称' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 姓名 -->
			<view class="mx-2 py-2 flex align-center" @click="handleTitle('修改姓名')">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">姓名</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Member_Name ? form.Member_Name : '请填写' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="mx-2 py-2 flex align-center  border-bottom border-light" @click="handleTitle('修改手机号')">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">手机号</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Mobile ? maskedPhoneNumber(form.Mobile) : '请输入手机号' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 性别 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light" @click="handlePopup">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">性别</text>
				<view class="w-100 flex justify-between align-center">
					<text class="font">{{ form.Sex ? form.Sex : '未知' }}</text>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 生日 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">生日</text>
				<view class="w-100 flex justify-between align-center">
					<picker mode="date" @change="bindDateChange">
						<text class="font">{{form.Birthday? form.Birthday : '请选择生日'}}</text>
					</picker>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 地区 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">地区</text>
				<view class="w-100 flex justify-between align-center">
					<picker mode="region" @change="bindAdressChange">
						<text class="font">{{form.Address? form.Address: '请选择地区'}}</text>	
					</picker>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="mx-2 py-2 flex justify-between align-center" @click="handleAddress">
				<text class="font text-dark">收货地址</text>
				<uni-icons type="right" color="#828d96" size="16"></uni-icons>
			</view>
		</view>
		<!-- 通用设置 -->
		<!-- <view class="font text-muted py-2 mx-2">通用设置</view> -->
		<!-- 个性化推荐 -->
		<!-- <view class="flex justify-between align-center p-2 bg-white" style="font-size: 12px;">
			<view>
				<view style="line-height: 1.8;">个性化推荐</view>
				<view>开启后可看到你感兴趣的内容，建议开启</view>
			</view>
			<view class="flex">
				<view>已允许</view>
				<uni-icons type="right" color="#828d96" size="16"></uni-icons>
			</view>
		</view> -->
		<!-- 性别选择器 -->
		<view v-if="genderPopupVisible" class="popup" @click="handlePopup">
			<view class="popup-content">
				<view class="font" @click="selectGender('男')">男</view>
				<view class="font" @click="selectGender('女')">女</view>
				<view class="bg-light" style="height: 10rpx;"></view>
				<view @click.stop="handlePopup" class="font">取消</view>
			</view>
		</view>	
		<!-- 提示框 -->
		<prompt v-if="isShow" :title="title" @cancel="cancel" @confirm="confirm"></prompt>
	</view>
</template>

<script>
	const app = getApp();
	import { getInquiryIDOriginal, getEditAction } from "@/api/global.js";
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import prompt from "@/components/tool/prompt.vue"
	export default {
		components: { //轮播图组件
			tabsTop,
			prompt,
		},
		data() {
			return {
				form: {
					Image: '',
					Nick: '',
					Mobile: '',
					Sex: '',
					Birthday: '',
					Address: '',
				},
				Address:[],//地址
				genderPopupVisible: false, // 弹窗是否可见
				isShow:false,//弹窗
				gender: ['男', '女'],
				title:'',
				loading:false,
			}
		},
		onLoad(e) {
			this.getData(e.Member_SerialNumber);
		},
		computed: {
			maskedPhoneNumber() {//手机号掩码
				return function (str){
					try{
						return str.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
					}catch{
						return '';
					}
				}
			},
		},
		methods: {
			async getData(Primary_Key) {//查询
				const res = await getInquiryIDOriginal({
					Primary_Key_Name: 'Member_SerialNumber',
					Primary_Key: Primary_Key,
					Data: 'member_info',
					Open_ID: app.globalData.Open_ID
				})
				if (res.length == 1) {
					this.form = res[0]
				}
			},
			async revise() {
				//判断是否有修改
				let lb_Boolean = false;
				for(let key in this.form){
					if(key.indexOf("_Original") == -1&&this.form[key] != this.form[key+'_Original']){
						lb_Boolean = true
						break;
					}
				}
				if(!this.loading&&lb_Boolean){
					this.loading = true
					uni.showLoading({
						title: "提交中...",
					});
					const res = await getEditAction({
						Data:JSON.stringify({Modify:{member_info:[this.form]}}),
						Open_ID:app.globalData.Open_ID
					})
					uni.hideLoading();
					this.loading = false;
					if(res.Status == "success"){
						uni.showToast({ title: '修改成功！',icon:'success'})
						app.globalData.memberInfo.Image = this.form.Image;
						app.globalData.memberInfo.Nick = this.form.Nick;
						app.globalData.memberInfo.Mobile = this.form.Mobile;
						const timer = setTimeout(() => {
							clearTimeout(timer)
							uni.navigateBack()//后退
						}, 500)
					}else{
						uni.showToast({ title: '修改失败！',icon:'error'})
						const timer = setTimeout(() => {
							clearTimeout(timer)
							uni.navigateBack()//后退
						}, 500)
					}
				}else{
					uni.navigateBack()//后退
				}
			},
			handleAddress(){//跳转到收货地址
				uni.navigateTo({
					url: '/pages/delivery/address'
				});
			},
			onChooseavatar(e) {//选择图片
				this.form.Image = e.detail.avatarUrl;
				let _this = this
				uni.getFileSystemManager().readFile({
					filePath: e.detail.avatarUrl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: (res) => { //成功的回调
						_this.form.Image ='data:image/jpeg;base64,' + res.data//不加上这串字符，在页面无法显示的哦
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
			},
			handleTitle(str){//开启弹窗
				this.isShow = true
				this.title = str
			},
			cancel(){//关闭弹窗
				this.isShow = false
			},
			confirm(str){//确认
				if(this.title==="修改昵称"){
					this.form.Nick = str
				}else if(this.title==="修改姓名"){
					this.form.Member_Name = str
				}else if(this.title==="修改手机号"){
					this.form.Mobile = str
				}
				this.isShow = false
			},
			bindAdressChange(e) {//选择地址
				this.Address =  e.detail.value
				this.form.Address = this.Address[0]+"-"+this.Address[1]+"-"+this.Address[2];
			},
			handlePopup() {//男女选择器
				this.genderPopupVisible = !this.genderPopupVisible;
			},
			selectGender(gender) {//选择性别
				this.form.Sex = gender;
				this.genderPopupVisible = false;
			},
			bindDateChange: function(e) {//选择生日
			    this.form.Birthday = e.detail.value
			},
		}
	}
</script>

<style>
	page{
		background-color: #f8f9fa;
	}
	
	button[plain] {
		border: 0
	}

	.info_content {
		width: 50%;
	}

	.item {
		line-height: 2;
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
		bottom: 0;
		position: absolute;
	}

	.popup-content view {
		padding: 10px;
		text-align: center;
	}
</style>